import ReactDOM from 'react-dom'
import React, { useReducer } from 'react'
function reducer (init, action) {
  console.log(init, action)
  if (action.type === 'age') {
    return { ...init, age: action.payload }
  } else if (action.type === 'name') {
    return { ...init, name: action.payload }
  }
  return init
}
function Com1 () {
  console.log('render...', Date.now())
  const [state, dispatch] = useReducer(reducer, { name: '小花', age: 10 })
  const { name, age } = state

  const submit = () => {
    console.log(name, age)
  }
  return (
  <>
    <h1>xxx</h1>
    <p>
        <input value={name} onChange={(e) => dispatch({ type: 'name', payload: e.target.value })} />
    </p>
    <p>
        <input value={age} onChange={(e) => dispatch({ type: 'age', payload: e.target.value })} />
    </p>
    <p>
        <button onClick={submit} >提交</button>
    </p>
  </>)
}

ReactDOM.render(<Com1/>, document.getElementById('root'))
